<!-- 
        作者：dailc
        时间：2016-11-19
        描述：  通用输入框样式页面
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/common/reset.css" />
		<link rel="stylesheet" href="../../css/demoCommon/demo_common_input.css" />
	</head>

	<body>
		<div class="show-column-search">
			<div class="show-simple">
				<!--通用样式1 -->
				<div class="common-input-row common-input-type1">
					<div class="common-input ">
						<span class="btn-search mui-icon mui-icon-search" ></span>
						<input type="text" class="common-input-clear" placeholder="请输入关键字" id="input-searchName">
					</div>
				</div>
			</div>
			<div class="show-simple">
				<!--通用样式2 -->
				<div class="common-input-row common-input-type2">
					<div class="common-input ">
						<span class="btn-search mui-icon mui-icon-search" ></span>
						<input type="text" class="common-input-clear" placeholder="搜索" id="input-searchName">
					</div>
					<span class="btn-search-txt " id="btn-text-search">确定</span>
				</div>
			</div>
			<div class="show-simple show-simple3">
				<!--通用样式3 -->
				<div class="common-input-row common-input-type3">
					<div class="common-input ">
						<span class="btn-search mui-icon mui-icon-search" ></span>
						<span class="btn-search-txt ">搜索</span>
					</div>
					
				</div>
			</div>
			
			<div class="show-simple show-simple4">
				<!--通用样式4，mui的搜索,思路为两层，一层是搜索，一层是placeholder -->
				<div class="common-input-type4">
					<div class="mui-input-row mui-search">
						<input type="search" class="mui-input-clear" placeholder="" id="input-searchName">
					</div>
					
				</div>
			</div>
			
			<div class="show-simple show-simple5">
				<!--mui搜索 -->
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="" id="input-searchName">
				</div>
			</div>
			
		</div>
		<!--mui的搜索基于mui.js动态生成 -->
	<script type="text/javascript" src="../../js/libs/mui.min.js" ></script>
	</body>

</html>